<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多玩家迷宫冒险</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: white;
        }

        .game-container {
            max-width: 1100px;
            width: 100%;
            background: rgba(0, 0, 30, 0.8);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            padding: 25px;
            backdrop-filter: blur(5px);
        }

        header {
            text-align: center;
            padding: 15px 0;
            margin-bottom: 20px;
            border-bottom: 2px solid #4e54c8;
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #ff8a00, #da1b60);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .player-controls {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background: rgba(30, 30, 60, 0.7);
            padding: 15px;
            border-radius: 10px;
        }

        .player-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .player-label {
            font-size: 1.1rem;
            color: #ddd;
        }

        .player-id-input {
            width: 60px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 2px solid #4e54c8;
            background: rgba(10, 10, 40, 0.8);
            color: white;
            font-size: 1.1rem;
            text-align: center;
            outline: none;
        }

        .player-id-input:focus {
            border-color: #ffcc00;
        }

        .player-color {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }

        .game-stats {
            display: flex;
            justify-content: space-around;
            background: rgba(30, 30, 60, 0.7);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .stat-box {
            text-align: center;
            min-width: 120px;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #ffcc00;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #aaa;
        }

        .game-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
        }

        .maze-container {
            position: relative;
            background: rgba(10, 10, 30, 0.9);
            border-radius: 8px;
            padding: 15px;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
        }

        .maze {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 2px;
        }

        .cell {
            width: 30px;
            height: 30px;
            background: #333;
            border-radius: 3px;
            transition: all 0.2s ease;
            position: relative;
        }

        .wall {
            background: linear-gradient(135deg, #3a6186, #89253e);
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
        }

        .path {
            background: #222;
        }

        .player {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            z-index: 10;
            animation: pulse 1.5s infinite;
            top: 5px;
            left: 5px;
        }

        .player-1 {
            background: radial-gradient(circle, #ffcc00, #ff6600);
            box-shadow: 0 0 10px #ff9900;
        }

        .player-2 {
            background: radial-gradient(circle, #00ccff, #0066cc);
            box-shadow: 0 0 10px #00aaff;
        }

        .player-3 {
            background: radial-gradient(circle, #ff66cc, #cc0099);
            box-shadow: 0 0 10px #ff33aa;
        }

        .player-4 {
            background: radial-gradient(circle, #66ff66, #00cc00);
            box-shadow: 0 0 10px #33ff33;
        }

        .exit {
            background: radial-gradient(circle, #00ff99, #00cc66);
            box-shadow: 0 0 10px #00ff99;
            border-radius: 50%;
            animation: glow 2s infinite alternate;
        }

        .coin {
            background: radial-gradient(circle, #ffcc00, #ff6600);
            box-shadow: 0 0 5px #ff9900;
            border-radius: 50%;
            transform: scale(0.6);
            position: absolute;
            width: 18px;
            height: 18px;
            top: 6px;
            left: 6px;
        }

        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin-top: 10px;
        }

        .keyboard-controls {
            display: grid;
            grid-template-columns: repeat(3, 70px);
            grid-template-rows: repeat(3, 70px);
            gap: 12px;
            margin-top: 15px;
        }

        .key {
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(50, 50, 100, 0.8);
            border-radius: 12px;
            font-size: 1.8rem;
            font-weight: bold;
            color: #ffcc00;
            box-shadow: 0 6px 0 rgba(40, 40, 80, 1);
            cursor: pointer;
            user-select: none;
            transition: all 0.1s;
        }

        .key:active, .key.active {
            transform: translateY(6px);
            box-shadow: 0 0 0 rgba(40, 40, 80, 1);
            background: rgba(70, 70, 140, 0.8);
        }

        .key.up { grid-column: 2; grid-row: 1; }
        .key.left { grid-column: 1; grid-row: 2; }
        .key.right { grid-column: 3; grid-row: 2; }
        .key.down { grid-column: 2; grid-row: 3; }

        .instructions {
            background: rgba(30, 30, 60, 0.7);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .instructions h3 {
            color: #ffcc00;
            margin-bottom: 10px;
            text-align: center;
        }

        .instructions ul {
            padding-left: 20px;
        }

        .instructions li {
            margin-bottom: 8px;
        }

        .restart-btn {
            background: linear-gradient(135deg, #ff8a00, #da1b60);
            color: white;
            border: none;
            padding: 14px 35px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            margin-top: 20px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
        }

        .restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .player-info {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .player-card {
            background: rgba(40, 40, 80, 0.7);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            width: 22%;
            min-height: 80px;
        }

        .player-card.active {
            background: rgba(80, 80, 150, 0.7);
            box-shadow: 0 0 15px rgba(100, 100, 255, 0.5);
        }

        .player-name {
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .player-score {
            font-size: 1.4rem;
            color: #ffcc00;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes glow {
            0% { box-shadow: 0 0 5px #00ff99; }
            100% { box-shadow: 0 0 20px #00ff99, 0 0 30px #00ff77; }
        }

        @media (max-width: 768px) {
            .maze {
                grid-template-columns: repeat(15, 20px);
                grid-template-rows: repeat(15, 20px);
            }

            .cell {
                width: 20px;
                height: 20px;
            }

            .player {
                width: 14px;
                height: 14px;
                top: 3px;
                left: 3px;
            }

            .coin {
                width: 12px;
                height: 12px;
                top: 4px;
                left: 4px;
            }

            .keyboard-controls {
                grid-template-columns: repeat(3, 55px);
                grid-template-rows: repeat(3, 55px);
            }

            .player-info {
                flex-wrap: wrap;
            }

            .player-card {
                width: 48%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <header>
            <h1>多玩家迷宫冒险</h1>
            <p>使用键盘方向键移动角色，收集金币并到达出口！</p>
        </header>

        <div class="player-controls">
            <div class="player-selector">
                <span class="player-label">当前控制玩家ID:</span>
                <input type="number" min="1" max="4" value="1" class="player-id-input" id="playerIdInput">
                <div class="player-color player-1"></div>
            </div>
            <div class="player-selector">
                <span class="player-label">玩家1: 黄色</span>
            </div>
            <div class="player-selector">
                <span class="player-label">玩家2: 蓝色</span>
            </div>
        </div>

        <div class="game-stats">
            <div class="stat-box">
                <div class="stat-value">85</div>
                <div class="stat-label">分数</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">3</div>
                <div class="stat-label">金币</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">1:25</div>
                <div class="stat-label">时间</div>
            </div>
            <div class="stat-box">
                <div class="stat-value">2/5</div>
                <div class="stat-label">关卡</div>
            </div>
        </div>

        <div class="game-area">
            <div class="maze-container">
                <div class="maze" id="maze"></div>
            </div>

            <div class="controls">
                <div class="keyboard-controls">
                    <div class="key up">↑</div>
                    <div class="key left">←</div>
                    <div class="key right">→</div>
                    <div class="key down">↓</div>
                </div>

                <button class="restart-btn" id="restartBtn">重新开始</button>
            </div>
        </div>

        <div class="player-info">
            <div class="player-card active" id="player1Card">
                <div class="player-name">玩家 1 (黄色)</div>
                <div class="player-score">25 分</div>
                <div>位置: (1, 1)</div>
            </div>
            <div class="player-card" id="player2Card">
                <div class="player-name">玩家 2 (蓝色)</div>
                <div class="player-score">18 分</div>
                <div>位置: (1, 13)</div>
            </div>
            <div class="player-card" id="player3Card">
                <div class="player-name">玩家 3 (粉色)</div>
                <div class="player-score">12 分</div>
                <div>位置: (13, 1)</div>
            </div>
            <div class="player-card" id="player4Card">
                <div class="player-name">玩家 4 (绿色)</div>
                <div class="player-score">30 分</div>
                <div>位置: (13, 13)</div>
            </div>
        </div>

        <div class="instructions">
            <h3>游戏说明</h3>
            <ul>
                <li>使用键盘方向键（↑ ← ↓ →）或点击屏幕上的方向按钮移动角色</li>
                <li>通过输入框切换当前控制的玩家（ID 1-4）</li>
                <li>收集金色硬币获得额外分数</li>
                <li>到达绿色出口进入下一关</li>
                <li>避开红色墙壁，否则会被阻挡</li>
                <li>尽可能快地完成关卡以获得时间奖励</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const mazeElement = document.getElementById('maze');
            const restartBtn = document.getElementById('restartBtn');
            const keys = document.querySelectorAll('.key');
            const playerIdInput = document.getElementById('playerIdInput');
            const playerCards = document.querySelectorAll('.player-card');

            // 迷宫配置
            const config = {
                rows: 15,
                cols: 15,
                players: {
                    1: { row: 1, col: 1, score: 25, color: 'player-1' },
                    2: { row: 1, col: 13, score: 18, color: 'player-2' },
                    3: { row: 13, col: 1, score: 12, color: 'player-3' },
                    4: { row: 13, col: 13, score: 30, color: 'player-4' }
                },
                exitPos: { row: 7, col: 7 },
                coins: [
                    { row: 3, col: 5 },
                    { row: 7, col: 2 },
                    { row: 10, col: 8 },
                    { row: 12, col: 3 },
                    { row: 5, col: 12 },
                    { row: 2, col: 10 },
                    { row: 8, col: 12 },
                    { row: 13, col: 6 },
                    { row: 4, col: 8 },
                    { row: 11, col: 11 }
                ]
            };

            // 当前控制的玩家ID
            let currentPlayerId = 1;

            // 更新玩家卡片显示
            function updatePlayerCards() {
                playerCards.forEach(card => card.classList.remove('active'));
                document.getElementById(`player${currentPlayerId}Card`).classList.add('active');

                // 更新玩家信息
                for (let i = 1; i <= 4; i++) {
                    const player = config.players[i];
                    const card = document.getElementById(`player${i}Card`);
                    card.querySelector('.player-score').textContent = `${player.score} 分`;
                    card.querySelector('div:last-child').textContent = `位置: (${player.row}, ${player.col})`;
                }
            }

            // 生成迷宫数据结构
            function generateMaze() {
                const maze = [];
                for (let row = 0; row < config.rows; row++) {
                    const mazeRow = [];
                    for (let col = 0; col < config.cols; col++) {
                        // 创建迷宫边界和内部墙
                        if (row === 0 || row === config.rows - 1 ||
                            col === 0 || col === config.cols - 1 ||
                            (row % 2 === 0 && col % 3 === 0) ||
                            (row === 5 && col > 1 && col < 13) ||
                            (col === 7 && row > 2 && row < 12) ||
                            (row === 10 && col > 3 && col < 10) ||
                            (row === 3 && col > 5 && col < 10) ||
                            (row === 8 && col > 2 && col < 8)) {
                            mazeRow.push(1); // 墙
                        } else {
                            mazeRow.push(0); // 路径
                        }
                    }
                    maze.push(mazeRow);
                }

                // 确保出口是路径
                maze[config.exitPos.row][config.exitPos.col] = 0;

                return maze;
            }

            const mazeData = generateMaze();

            // 渲染迷宫
            function renderMaze() {
                mazeElement.innerHTML = '';

                for (let row = 0; row < config.rows; row++) {
                    for (let col = 0; col < config.cols; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell';
                        cell.dataset.row = row;
                        cell.dataset.col = col;

                        if (mazeData[row][col] === 1) {
                            cell.classList.add('wall');
                        } else {
                            cell.classList.add('path');

                            // 放置出口
                            if (row === config.exitPos.row && col === config.exitPos.col) {
                                const exitEl = document.createElement('div');
                                exitEl.className = 'exit';
                                cell.appendChild(exitEl);
                            }

                            // 放置金币
                            const coin = config.coins.find(c => c.row === row && c.col === col);
                            if (coin) {
                                const coinEl = document.createElement('div');
                                coinEl.className = 'coin';
                                cell.appendChild(coinEl);
                            }
                        }

                        mazeElement.appendChild(cell);
                    }
                }

                // 放置所有玩家
                for (let i = 1; i <= 4; i++) {
                    const player = config.players[i];
                    const playerCell = document.querySelector(`.cell[data-row="${player.row}"][data-col="${player.col}"]`);

                    if (playerCell) {
                        const playerEl = document.createElement('div');
                        playerEl.className = `player ${player.color}`;
                        playerCell.appendChild(playerEl);
                    }
                }
            }

            // 移动玩家
            function movePlayer(direction) {
                const player = config.players[currentPlayerId];
                const { row, col } = player;
                let newRow = row;
                let newCol = col;

                switch(direction) {
                    case 'up': newRow--; break;
                    case 'down': newRow++; break;
                    case 'left': newCol--; break;
                    case 'right': newCol++; break;
                }

                // 检查边界和墙壁
                if (newRow >= 0 && newRow < config.rows &&
                    newCol >= 0 && newCol < config.cols &&
                    mazeData[newRow][newCol] !== 1) {

                    // 更新玩家位置
                    player.row = newRow;
                    player.col = newCol;

                    // 检查是否收集到金币
                    const coinIndex = config.coins.findIndex(c =>
                        c.row === newRow && c.col === newCol);
                    if (coinIndex !== -1) {
                        config.coins.splice(coinIndex, 1);
                        player.score += 5;
                    }

                    // 检查是否到达出口
                    if (newRow === config.exitPos.row && newCol === config.exitPos.col) {
                        player.score += 20;
                        setTimeout(() => {
                            alert(`玩家 ${currentPlayerId} 已到达出口！获得20分奖励！`);
                        }, 300);
                    }

                    renderMaze();
                    updatePlayerCards();
                }
            }

            // 键盘控制
            document.addEventListener('keydown', (e) => {
                switch(e.key) {
                    case 'ArrowUp':
                        movePlayer('up');
                        keys[0].classList.add('active');
                        break;
                    case 'ArrowDown':
                        movePlayer('down');
                        keys[3].classList.add('active');
                        break;
                    case 'ArrowLeft':
                        movePlayer('left');
                        keys[1].classList.add('active');
                        break;
                    case 'ArrowRight':
                        movePlayer('right');
                        keys[2].classList.add('active');
                        break;
                }
            });

            document.addEventListener('keyup', () => {
                keys.forEach(key => key.classList.remove('active'));
            });

            // 屏幕按钮控制
            keys.forEach(key => {
                key.addEventListener('click', () => {
                    const direction = key.classList[1];
                    movePlayer(direction);

                    // 添加激活效果
                    key.classList.add('active');
                    setTimeout(() => {
                        key.classList.remove('active');
                    }, 200);
                });
            });

            // 重新开始游戏
            restartBtn.addEventListener('click', () => {
                config.players[1] = { row: 1, col: 1, score: 25, color: 'player-1' };
                config.players[2] = { row: 1, col: 13, score: 18, color: 'player-2' };
                config.players[3] = { row: 13, col: 1, score: 12, color: 'player-3' };
                config.players[4] = { row: 13, col: 13, score: 30, color: 'player-4' };

                config.coins = [
                    { row: 3, col: 5 },
                    { row: 7, col: 2 },
                    { row: 10, col: 8 },
                    { row: 12, col: 3 },
                    { row: 5, col: 12 },
                    { row: 2, col: 10 },
                    { row: 8, col: 12 },
                    { row: 13, col: 6 },
                    { row: 4, col: 8 },
                    { row: 11, col: 11 }
                ];

                renderMaze();
                updatePlayerCards();
            });

            // 玩家ID更改事件
            playerIdInput.addEventListener('change', (e) => {
                let newId = parseInt(e.target.value);

                // 确保ID在1-4之间
                if (newId < 1) newId = 1;
                if (newId > 4) newId = 4;

                currentPlayerId = newId;
                e.target.value = newId;
                updatePlayerCards();
            });

            // 初始渲染
            renderMaze();
            updatePlayerCards();
        });
    </script>
</body>
</html>